iT邦幫忙

2022 iThome 鐵人賽

DAY 7
9

前言

嗨,我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我,進而獲得更多資訊唷!

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文英文日文簡體中文
觀看分類:React 白話文運動其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人,
都可以透過 Hogan.tech 嘗試進入程式領域。


前一篇文章介紹了React 的運作,包含了

  1. 為什麼需要前端框架?
  2. React元素
  3. React DOM

這一篇則是會介紹一個React中重要的語法 - JSX

JSX 也是目前我們比較常看到的React寫法 ,因此接下來會介紹

  1. JSX 是什麼?
  2. JSX 語法
  3. 使用JSX建構React元件

JSX 是什麼?

在講解JSX之前先來複習一下,前一篇所講解的,React 建立DOM 語法

const dish = React.createElement("h1", "Hello World")

ReactDOM.render(dish, document.getElementById("root"))

透過上述的React語法可以轉換成以下HTML DOM

<div id="root">
	<h1>Hello World</h1>
</div>

看到上面的程式碼應該不難想像,JavaScript中的React語法相對難理解,且如果是一個更複雜有上千行的HTML文件,那程式碼會更加的複雜且難以理解。

因此Facebook團隊在開發React的同時,也針對這一個缺點,新增了一種更簡潔的語法,用來建構前端網頁元件,那就是JSX。

JSX是由兩個字所組成的縮寫 「JS」JavaScript 以及「X」XML。雖然JSX與HTML有點相似,但其實本質上還是透過React的語法去建構一個元件的,以下是一個簡單的JSX範例。


import React from 'react';
import ReactDOM from 'react-dom/client';

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

可以看到中間幾乎與HTML語法相同,然而程式的開頭與結尾都是JavaScript的語法。

電腦其實也是透過一些工具,針對JSX語法進行轉譯,最後才會產生純粹的HTML,之後的文章也會針對這樣的工具進行講解。


JSX 語法

JSX語法看似HTML,實際上它是JavaScript以及React的語法,因此這邊會針對JSX語法進行講解。

className

在一般HTML的語法中,我們如果要對一個tag加上class會是用以下的寫法

<h1 class="hi">Hello World</h1>

然而在JSX的語法中,要針對一個tag加上任何的class,則是要改為className

<h1 className="hi">Hello World</h1>

巢狀元件

JSX的語法與HTML相同,都是支援巢狀格式的,JSX也可以建立自己的元件,並且將元件變成巢狀的格式。

<AnimalList>
	<Dog />
	<Cat />
	<Bird />
</AnimalList>

複合表達式

JSX本身也是由JavaScript的語法,因此完全支援之前我們所講解的JavaScript語法,以及ES6中的語法,如果用 樣板字面值(Template Literals)來做舉例

const fruits = ["Apples","Bananas","Cherries"]

const myElement = (
  <ul>
    <li>{fruits[0]}</li>
    <li>{fruits[1]}</li>
    <li>{fruits[2]}</li>
	 <div>`I Love ${fruits[0]}`</div>
  </ul>
);

在JSX中可以用大括號把JavaScript的變數包進去,也可以使用 樣板字面值(Template Literals)的語法將字串與JSX做結合

JavaScript Map

既然可以使用JavaScript的語法,那我們也可以使用Array內建的map函數,來與JSX做結合

const fruits = ["Apples","Bananas","Cherries"]

const myElement = (
  <ul>
	{fruits.map(element=>{
		<li>{element}</li>
	})}
  </ul>
);

透過map 函數的使用也可以將多個li 組合起來。


使用JSX建構React元件

最後要講解如何建構元件的,用最一開始的程式碼來舉例


import React from 'react';
import ReactDOM from 'react-dom/client';

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

第一行以及第二行用來呼叫react以及react-dom/client 已經寫好的函式庫,並且使用內建的函式。

中間的const用來做宣告,並且裡面可以放置JSX的語法,其中可以寫一些HTML,當這些完成之後就可以獲得一個名為myElement的元件。

最後透過ReactDOM裡面的createRoot函數,先建立一個 「id="root"」的DOM,最後再將自己建立的myElement元件放入至 root中。

經過上面的流程,就可以建構出一個React元件(component)了。


結語

這一篇講解了一個很重要的React語法-JSX,也是透過這樣的語法來讓我們更容易建立一個React元件。也另外講解了JSX的原理、語法以及如何建立一個元件。

如果有任何建議與疑問也歡迎留言!

如果喜歡此系列文章,請不吝於按下喜歡及分享,讓更多人看到唷~


上一篇
React白話文運動06-React運作原理
下一篇
React白話文運動08-Babel & Webpack & Npm
系列文
React框架白話文運動30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言